毕达哥拉斯
<template>
	<div>
		<h2></h2>
		<div id="postEcharts">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		name: 'postEcharts',
		data() {
			return {
				// industry: [],
				// ratio: [],
			}
		},
		mounted() {
			this.getData();
			// this.drawLine();
		},
		methods: {

			getData() {

				var param = this.$qs.stringify({
					majorId: '1793',
				});
				console.log(param);
				this.$axios.post('echarts/showJobById', param)
					.then(rst => {
						//创建一个数组，用来装对象传给series.data，因为series.data里面不能直接写for循环
						console.log(rst.data);
						var serviceData = [];
						for (var i = 0; i < rst.data.length; i++) {
							var obj = new Object();
							obj.name = rst.data[i].job;
							obj.value = rst.data[i].ratio;
							serviceData[i] = obj;
						}
						this.drawLine(serviceData)
					}, error => {
						console.log(error)
					})
			},

			drawLine(serviceData) {
				var myChart = echarts.init(document.getElementById('postEcharts'));
				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '就业岗位分布图',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						//data:job.vaule
					},
					series: [{
						name: '就业岗位分布率',
						type: 'pie',
						radius: '50%',
						data: serviceData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 127, 0.5)'
							}
						},
						itemStyle: {
							normal: {
								//这里是重点
								color: function(params) {
									//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
									var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
										'#749f83', '#ca8622'
									];
									return colorList[params.dataIndex]
								}
							}
						}

					}]

				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize()
				});
			},
		},
		created() {

		}
	}
</script>

<style scoped>
	h2 {
		text-align: center;
		padding: 30px;
		font-size: 18px;
	}

	#postEcharts {
		width: 500px;
		height: 500px;
		border: 1px;
		margin: 0 auto;
	}
</style>
